import WebPlayer from '../components/WebPlayer'
import example from '../examples/flexbox'


Components specify the layout of their children using the <b>flexbox</b> algorithm. Using flexbox lets you specify a layout that expands or shrinks to fill screens of various dimensions. You can seamlessly mix and match these automatic layouts with fixed sizes like <code>width: 100</code>.

To choose the right layout for a component's children, you must make 3 choices:

| Property         | Default      | Options                                                     | Description                                                                                                                                                                                                                                              |
| ---------------- | ------------ | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `flexDirection`  | `column`     | `row, column`                                               | Do you want a vertical (`column`) or horizontal (`row`) layout? This choice determines the orientation of the **primary axis** of your layout.                                                                                                           |
| `justifyContent` | `flex-start` | `flex-start, center, flex-end, space-around, space-between` | How should the content be distributed along the <b>primary axis</b> of your layout? Should it be at the start, the center, the end, or spaced evenly?                                                                                                    |
| `alignItems`     | `stretch`    | `flex-start, center, flex-end, stretch`                     | How should the content be aligned along the <b>secondary axis</b> of your layout? (If the primary axis is `row`, then the secondary axis is `column`, and vice versa) Should content be aligned at the start, the center, the end, or stretched to fill? |

The following example lets you try all the possible combinations of flexbox properties and layouts.

<WebPlayer {...example} />
